﻿<template>
  <a-modal
    :width="850"
    :destroyOnClose="true"
    :visible="visible"
    :forceRender="true"
    title="批量导入"
    cancelText="取消上传"
    okText="开始上传"
    @cancel="handleCancel"
    @ok="handleSubmit">
    <a-spin :spinning="confirmLoading">
      <a-row :span="24">
        <span>请选择要导入的数据文件（Excel格式）</span>
      </a-row>
      <p></p>
      <a-row>
        <a-col :span="16">
          <a-upload-dragger accept=".xlsx,.xls" :multiple="false" :customRequest="customRequest" @change="handleChange" :beforeUpload="beforeUpload">
            <a-icon style="font-size: 40px;" type="cloud-upload" />
          </a-upload-dragger>
        </a-col>
        <a-col :span="8">
          <span>导入模式：</span>
          <a-select
            style="width: 130px"
            placeholder="请选择导入模式"
            v-model="importExcelType">
            <a-select-option
              v-for="(item,index) in importExcelTypeData"
              :key="index"
              :value="item.code">{{ item.name }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row :span="24">
        <a-button @click="showDemand" style="width: 150px;text-align: left;" type="link" v-show="!detailed">
          点击查看文件上传要求
        </a-button>
        <span>【</span>
        <a-button style="width: 90px;text-align: left;" @click="wmsOrderDownloadExcelTemplate" type="link">下载导入模板</a-button>，填写并上传
        <span>】</span>
        <a-button @click="showDemand" style="width: 150px;text-align: left;" type="link" v-show="detailed">
          收起
        </a-button>
      </a-row>
      <a-row v-show="detailed" style="background: #fef4e8; height: 30px;" :span="24">
        <a-breadcrumb>
          <a-breadcrumb-item style="line-height: 30px;color: #faad14;margin-left: 18px;">文件上传要求</a-breadcrumb-item>
        </a-breadcrumb>
      </a-row>
      <pre v-show="detailed">
        <div v-html="demandText"></div>
      </pre>
      <a-table v-show="detailed" :columns="columns" :data-source="dataList" :rowKey="(record) => record.processID" :pagination="false"></a-table>
      <pre v-show="detailed">
        <div v-html="columnText"></div>
      </pre>
    </a-spin>
  </a-modal>
</template>

<script>
import { downloadFile, checkFile, parseExcelFieldText, parseDemandText } from '@/utils/util'
import { wmsOrderFromExcel, wmsOrderDownloadExcelTemplate} from '@/api/modular/main/WmsOrderManage'
import { sysExcelTemplateGetColumnList } from '@/api/modular/system/excelTemplateManage'
export default {
  components: {
  },
  data() {
    return {
      visible: false,
      detailed: false,
      confirmLoading: false,
      fileList: [],
      importExcelTypeData: [],
      importExcelType: '1',
      uploadFile: null,
      columns: [],
      dataList: [],
	  demandText:'',
      columnText: ''
    }
  },
  methods: {
    index() {
      this.visible = true;
      this.importExcelTypeData = this.$options.filters['dictData']('import_excel_type')
      this.demandText = parseDemandText("wmsOrderDownloadExcelTemplate")
      window.downloadFile = this.wmsOrderDownloadExcelTemplate;
      this.getTable();
    },
    showDemand() {
      this.detailed = !this.detailed;
    },
    customRequest(document) {
      this.uploadFile = document
    },
    getTable() {
      sysExcelTemplateGetColumnList({className: "WmsOrder"}).then(res =>
      {
        if (res.success) {
          this.columns =[];
          this.dataList = [{}];
          res.data.forEach(x => {
            this.columns.push({
              dataIndex: x.columnName,
              key: x.columnName,
              title: x.columnComment
            });
            this.dataList[0][x.columnName] = x.isRequired ? "必填" : "非必填"
          });
          this.columnText = parseExcelFieldText(res.data);
        }
      });
    },
    beforeUpload(fileInfo) {
      let res = checkFile(fileInfo, 1073741824, ['.xlsx', '.xls']);
      if (!res.success) {
        this.$message.warning(res.msg)
        return false
      }
      setTimeout(() => {this.uploadFile.onSuccess(this.uploadFile.file)}, 1000)
    },
    handleChange(fileInfo) {
      if (fileInfo.file.status === 'error') {
        fileInfo.fileList.splice(0, 1)
      }
      if (fileInfo.file.status === 'done') {
        if (fileInfo.fileList.length > 1) {
          fileInfo.fileList.splice(0, 1)
        }
        this.fileList = fileInfo.file
      }
    },
    handleSubmit() {
      this.confirmLoading = true
      const formData = new FormData()
      formData.append('file', this.uploadFile.file)
      wmsOrderFromExcel(formData, {importExcelType: this.importExcelType}).then(res => {
        this.$message.success('操作成功')
        this.confirmLoading = false
        this.$emit('ok', [])
        this.handleCancel()
      }).finally((res)=>{this.confirmLoading = false})
    },
    handleCancel() {
      this.visible = false
      this.detailed = false
    },
    wmsOrderDownloadExcelTemplate() {
      wmsOrderDownloadExcelTemplate({version: "v2"}).then((res) => {
        downloadFile(res);
      }).catch((err) => {
        this.$message.error('下载错误：获取文件流错误' + err)
      })
    }
  }
}
</script>

<style scoped>
::v-deep .ant-upload.ant-upload-drag {
  position: relative;
  width: 140px;
  height: 135px;
  text-align: center;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
::v-deep .ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
  color: #ffc53d;
  border-color: white;
}
</style>